<template>
  <div class="banner">
    <div class="main">
      <div class="modelBox">
        <h2 class="title">数据汇总</h2>
        <div>
          <el-select
            v-model="dataFilter.rule"
            placeholder="请选择"
            style="margin-right: 20px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value1"
            type="dataFilter.date"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="请选择日期区间"
          >
          </el-date-picker>
        </div>
        <div class="infoBox">
          <el-row :gutter="20">
            <el-col :span="4"
              ><div class="sBox" style="background: rgba(138, 161, 239, 0.253)">
                <div class="flexBox" style="position: relative; top: 13px">
                  <div class="zsTitleBox">
                    <img src="../../../assets/images/icon/custom.png" />
                    <p style="color: #2066fc">客户</p>
                  </div>
                  <div class="mainText cusTom">
                    <p>
                      <span class="sTitle">正式客户：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">公海客户：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">线索：</span
                      ><span class="sNum">333</span>
                    </p>
                  </div>
                </div>
              </div></el-col
            >
            <el-col :span="5"
              ><div class="sBox" style="background: rgb(240, 183, 165, 0.253)">
                <div class="flexBox">
                  <div class="zsTitleBox">
                    <img src="../../../assets/images/icon/hetong.png" />
                    <p style="color: #fb6e17">合同</p>
                  </div>
                  <div class="mainText orange">
                    <p>
                      <span class="sTitle">合同数：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">即将到期：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">到期合同：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">合同待付金额：</span
                      ><span class="sNum">333</span>
                    </p>
                  </div>
                </div>
              </div></el-col
            >
            <el-col :span="5"
              ><div class="sBox" style="background: rgba(241, 137, 137, 0.253)">
                <div class="flexBox" style="position: relative; top: 13px">
                  <div class="zsTitleBox">
                    <img src="../../../assets/images/icon/genjin.png" />
                    <p style="color: #f73f28">跟进</p>
                  </div>
                  <div class="mainText red">
                    <p>
                      <span class="sTitle">跟进客户：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">待跟进计划：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">回款总金额：</span
                      ><span class="sNum">333</span>
                    </p>
                  </div>
                </div>
              </div></el-col
            >
            <el-col :span="5"
              ><div class="sBox" style="background: rgba(171, 236, 195, 0.253)">
                <div class="flexBox">
                  <div class="zsTitleBox">
                    <img src="../../../assets/images/icon/shangpin.png" />
                    <p style="color: #0a9946">商品</p>
                  </div>
                  <div class="mainText green">
                    <p>
                      <span class="sTitle">上架数：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">下架数：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">预下架数：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">商品总数：</span
                      ><span class="sNum">333</span>
                    </p>
                  </div>
                </div>
              </div></el-col
            >
            <el-col :span="5"
              ><div class="sBox" style="background: rgba(188, 164, 250, 0.253)">
                <div class="flexBox" style="position: relative; top: 13px">
                  <div class="zsTitleBox">
                    <img src="../../../assets/images/icon/shouhou.png" />
                    <p style="color: #b926de">售后</p>
                  </div>
                  <div class="mainText purple">
                    <p>
                      <span class="sTitle">退货单数：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">退款金额：</span
                      ><span class="sNum">333</span>
                    </p>
                    <p>
                      <span class="sTitle">换货单数：</span
                      ><span class="sNum">333</span>
                    </p>
                  </div>
                </div>
              </div></el-col
            >
          </el-row>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12"
          ><div class="modelBox">
            <h2 class="title">销售趋势</h2>
            <el-radio-group v-model="tabPosition" style="margin-bottom: 10px">
              <el-radio-button label="day">日</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
            </el-radio-group>
            <LineChart :chart-data="lineChartData" /></div
        ></el-col>
        <el-col :span="12"
          ><div class="modelBox" style="height: 474.2px">
            <h2 class="title">客户转化</h2>

            <PieChart /></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"
          ><div class="modelBox">
            <h2 class="title">待办事项</h2>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="title" label="事项名称"> </el-table-column>
              <el-table-column prop="num" label="数量"> </el-table-column>
            </el-table></div
        ></el-col>
        <el-col :span="12"
          ><div class="modelBox" style="height: 297.6px; overflow-y: auto">
            <h2 class="title">待办事项</h2>
            <el-table :data="noticeData" stripe style="width: 100%">
              <el-table-column prop="title" label="消息名称"> </el-table-column>
              <el-table-column prop="num" label="时间"> </el-table-column>
            </el-table></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"
          ><div class="modelBox">
            <h2 class="title">销售榜</h2>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column label="">
                <template slot-scope="scope">
                  <p v-if="scope.$index == 0" class="one pai">
                    <img
                      src="../../../assets/images/icon/one.png"
                      style="width: 30px; height: 30px"
                    />
                  </p>
                  <p v-else-if="scope.$index == 1" class="two pai">
                    <img
                      src="../../../assets/images/icon/two.png"
                      style="width: 30px; height: 30px"
                    />
                  </p>
                  <p v-else-if="scope.$index == 2" class="three pai">
                    <img
                      src="../../../assets/images/icon/three.png"
                      style="width: 30px; height: 30px"
                    />
                  </p>
                  <p v-else class="pai">{{ scope.$index + 1 }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="姓名"> </el-table-column>
              <el-table-column prop="num" label="销售额"> </el-table-column>
            </el-table></div
        ></el-col>
        <el-col :span="12"
          ><div class="modelBox">
            <h2 class="title">回款榜</h2>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column label="">
                <template slot-scope="scope">
                  <p v-if="scope.$index == 0" class="one pai">
                    <img
                      src="../../../assets/images/icon/one.png"
                      style="width: 30px; height: 30px"
                    />
                  </p>
                  <p v-else-if="scope.$index == 1" class="two pai">
                    <img
                      src="../../../assets/images/icon/two.png"
                      style="width: 30px; height: 30px"
                    />
                  </p>
                  <p v-else-if="scope.$index == 2" class="three pai">
                    <img
                      src="../../../assets/images/icon/three.png"
                      style="width: 30px; height: 30px"
                    />
                  </p>
                  <p v-else class="pai">{{ scope.$index + 1 }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="姓名"> </el-table-column>
              <el-table-column prop="num" label="回款额"> </el-table-column>
              <el-table-column prop="num" label="回款比例"> </el-table-column>
            </el-table></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import LineChart from "./LineChart.vue";
import PieChart from "./PieChart.vue";
export default {
  components: {
    LineChart,
    PieChart,
  },
  data() {
    return {
      tableData: [
        {
          title: "待催款客户数",
          num: 3,
        },
        {
          title: "待审核定制单数",
          num: 5,
        },
        {
          title: "待审核退货单数",
          num: 5,
        },
        {
          title: "待议价商品数",
          num: 4,
        },
      ],
      noticeData: [
        {
          title: "预下架提醒",
          num: "230-10-27",
        },
      ],
      tabPosition: "day",
      dataFilter: {
        rule: "1",
        date: "",
      },
      options: [
        {
          value: "1",
          label: "仅本人",
        },
        {
          value: "2",
          label: "本人及下属",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.banner {
  background-image: linear-gradient(
    rgb(230, 238, 255) 0%,
    rgb(234, 242, 255) 30%,
    rgb(234, 242, 255) 50%,
    rgb(234, 242, 255) 100%
  );
  background-size: cover;
  width: 100%;
  height: 100%;
}
.main {
  padding: 30px;
  .title {
    font-size: 20px;
    margin-top: 0;
  }
  .modelBox {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 20px;
  }
  .infoBox {
    margin: 20px 0;
  }
  .sBox {
    padding: 20px 15px;
    border-radius: 10px;
    width: 100%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    font-size: 14px;
    height: 170.6px;
    p {
      margin: 5px 0;
    }
    .sNum {
      font-size: 20px;
    }
    .cusTom {
      .sNum {
        color: #2066fc;
      }
    }
    .orange {
      .sNum {
        color: #fb6e17;
      }
    }
    .red {
      .sNum {
        color: #f73f28;
      }
    }
    .green {
      .sNum {
        color: #0a9946;
      }
    }
    .purple {
      .sNum {
        color: #b926de;
      }
    }
  }
  .flexBox {
    display: flex;
    align-items: center;
    .zsTitleBox {
      background: white;
      border-radius: 10px;
      text-align: center;

      width: 80px;
      height: 70px;
      margin-right: 20px;
      img {
        height: 30px;
        margin-top: 8px;
      }
      p {
        margin-top: 3px;
      }
    }
    .mainText {
      flex: 1;
    }
  }
}
</style>
